<template>
  <!-- 1、v-text 显示 内置指令 -->
   <div v-text="msg" class="dv1"></div>
   
  <!-- 2、v-html 显示加粗的 这是XXX的页面 -->
   <div v-html="msg1" class="dv2"></div>
  <!-- 3、v-bind 显示一张图片 -->
   <img :src="src" v-show="flag">
    <!-- 4、v-on 点击按钮替换图片 -->
     <button @click="qwe">一个按钮</button>
     <p>
     <!-- 5、v-model 姓名：input 以上是xxx完成的效果 -->
      <input type="text" v-model="username" />
      <div>以上是{{username}}完成的效果</div></p>
      <!-- 6、v-if 点击按钮姓名切换成姓名+学号 -->
        <p v-if="type=='A'">潘伊杨</p>
    <p v-else-if="type=='B'">潘伊杨2430150126</p>
     <button @click="tran">切换</button>
   <!-- 7、v-show 点击按钮隐藏图片 -->
    <p v-show="flag">通过v-show控制元素</p>
    <button @click="flag=!flag">显示/隐藏</button>
    <!-- 8、v-for 序号：1--指令是：v-text  ... 序号：8 ... 指令是v-for -->
     <p v-for="(item,index) in arr" :key="index">
        {{ index }} ---{{ item }}
    </p>
</template>

<script setup>
import { ref } from 'vue';

const msg="<span>内置指令</span>"

const msg1="<b>这是潘伊杨的页面</b>"

let src =ref(new URL("../assets/img1.png", import.meta.url).href);
const qwe =() => {
  src.value = new URL("../assets/1234.jpeg", import.meta.url).href;
}

const username = ref("")

   const type = ref("A");
    function tran() {
        type.value = "B"
    }

        const flag = ref(true);


  const arr = ["序号：1 指令是：v-text","序号：2 指令是：v-html",
  "序号：3 指令是：v-bind","序号：4 指令是：v-on","序号：5 指令是：v-model",
"序号：6 指令是：v-if","序号：7 指令是：v-show","序号：8 指令是：v-for"
  ]

</script>

<style>
</style>
